<!DOCTYPE html>
<html>
<head>
  <title>Physics Diagram</title>
</head>
<body>
  <canvas id="physicsCanvas" width="400" height="400" style="border: 1px solid #d3d3d3;"></canvas>
  <script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // Parameters based on the image analysis
    const anchor = { x: 150, y: 100 };
    const plateWidth = 12;
    const plateX = anchor.x;
    const stringLength = 140;
    const angle_deg = 30;
    const angle_rad = angle_deg * Math.PI / 180;
    const ballRadius = 12;

    // Calculate ball position
    // The angle theta is with the vertical plate.
    const ball = {
        x: anchor.x + stringLength * Math.sin(angle_rad),
        y: anchor.y + stringLength * Math.cos(angle_rad)
    };

    // Clear canvas
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = 'white';
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    // --- Draw the charged plate ---
    ctx.fillStyle = '#E0E0E0'; // Light gray fill
    ctx.strokeStyle = '#333333'; // Dark gray border
    ctx.lineWidth = 1;

    // Plate body - Anchor point is on the right surface of the plate
    ctx.fillRect(plateX - plateWidth, 50, plateWidth, 300);
    ctx.strokeRect(plateX - plateWidth, 50, plateWidth, 300);

    // Ragged top edge
    ctx.beginPath();
    ctx.moveTo(plateX - plateWidth, 50);
    ctx.lineTo(plateX - plateWidth - 4, 46);
    ctx.moveTo(plateX - plateWidth, 50);
    ctx.lineTo(plateX + 3, 48);
    ctx.stroke();

    // Ragged bottom edge
    ctx.beginPath();
    ctx.moveTo(plateX - plateWidth, 350);
    ctx.lineTo(plateX - plateWidth - 3, 355);
    ctx.moveTo(plateX - plateWidth, 350);
    ctx.lineTo(plateX + 4, 353);
    ctx.stroke();

    // --- Draw the string ---
    ctx.beginPath();
    ctx.moveTo(anchor.x, anchor.y);
    ctx.lineTo(ball.x, ball.y);
    ctx.strokeStyle = 'black';
    ctx.lineWidth = 1.5;
    ctx.stroke();

    // --- Draw the ball ---
    ctx.beginPath();
    const gradient = ctx.createRadialGradient(
        ball.x - ballRadius * 0.4, ball.y - ballRadius * 0.4, ballRadius * 0.1,
        ball.x, ball.y, ballRadius
    );
    gradient.addColorStop(0, 'white');
    gradient.addColorStop(1, '#808080'); // Gray
    ctx.fillStyle = gradient;
    ctx.arc(ball.x, ball.y, ballRadius, 0, 2 * Math.PI);
    ctx.fill();
    ctx.strokeStyle = '#333';
    ctx.lineWidth = 1;
    ctx.stroke();

    // --- Draw the angle arc and label ---
    ctx.beginPath();
    ctx.lineWidth = 1;
    ctx.strokeStyle = 'black';
    // Angle in canvas coordinates (y-down): arc from string angle to vertical angle.
    const stringAngleCanvas = Math.atan2(ball.y - anchor.y, ball.x - anchor.x);
    const verticalAngleCanvas = Math.PI / 2; // 90 degrees, straight down
    ctx.arc(anchor.x, anchor.y, 40, stringAngleCanvas, verticalAngleCanvas);
    ctx.stroke();
    
    // Angle label θ
    ctx.font = 'italic 20px Times New Roman';
    ctx.fillStyle = 'black';
    const angleLabelAngle = (stringAngleCanvas + verticalAngleCanvas) / 2;
    const angleLabelRadius = 22;
    ctx.fillText('θ', 
                 anchor.x + angleLabelRadius * Math.cos(angleLabelAngle), 
                 anchor.y + angleLabelRadius * Math.sin(angleLabelAngle) + 8 // Vertical adjustment for font baseline
    );

    // --- Draw text labels ---
    // +σ labels
    ctx.font = '20px Times New Roman';
    ctx.textAlign = 'center';
    ctx.fillText('+', plateX - plateWidth - 15, anchor.y - 30);
    ctx.fillText('+', plateX + 15, anchor.y - 30);
    ctx.font = 'italic 20px Times New Roman';
    ctx.fillText('σ', plateX - plateWidth - 5, anchor.y - 30);
    ctx.fillText('σ', plateX + 25, anchor.y - 30);

    // m label
    ctx.textAlign = 'left';
    ctx.font = 'italic 20px Times New Roman';
    ctx.fillText('m', ball.x + ballRadius + 5, ball.y + ballRadius * 0.5);

    // Bottom label
    ctx.font = '20px "SimSun", "Microsoft YaHei", sans-serif';
    ctx.textAlign = 'center';
    ctx.fillText('习题 7-36 图', canvas.width / 2, canvas.height - 20);

  </script>
</body>
</html>